<template>
   <div class="load-container">
      <div class="login-box">
         <!-- 头像 -->
         <div class="avatar-box">
            <img src="../assets/logo.png" >
         </div>
         <!-- 登录表单 -->
         <el-form :model="loginForm" label-width="0px" class="login-form" :rules="loginRules" ref="loginFormRef">
            <el-form-item prop="user">
               <el-input v-model="loginForm.user" prefix-icon="iconfont icon-user"></el-input>
            </el-form-item>
            <el-form-item prop="pwd">
               <el-input v-model="loginForm.pwd" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
            </el-form-item>
            <el-form-item class="btns">
            <el-button type="primary" @click="login()">登录</el-button>
            <el-button type="info" @click="resetForm()">重置</el-button>
            </el-form-item>
         </el-form>
      </div>
   </div>
</template>
<script>
export default {
  data () {
    return {
      // 登录表单数据绑定对象
      loginForm: {
        user: 'admin',
        pwd: '123456'
      },
      loginData: {
        username: '',
        password: ''
      },
      // 表单验证规则对象
      loginRules: {
        user: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 登录表单
    // 登录
    login () {
      // console.log(this.$refs.loginFormRef.validate())
      this.$refs.loginFormRef.validate(async valid => {
        // console.log(valid) // Function(callback: Function(boolean, object))；valid是boolean值，若为true则表单验证成功
        if (!valid) return
        // 表单已验证通过，执行以下操作
        // 数据重构
        this.loginData.username = this.loginForm.user
        this.loginData.password = this.loginForm.pwd
        // data：从数据库获取到的用户信息，包括token
        const { data: res } = await this.$http.post('login', this.loginData)
        if (res.meta.status !== 200) return this.$message.error('登录失败')
        this.$message.success('登录成功')
        // 1.将登录成功后的 token 保存到客户端的sessionStorage
        // 1.1项目中除了登录之外的其他API接口，必须在登录后才能访问
        // 1.2 token 只应在当前网站打开期间生效，所以将token保存在sessionStorage中
        // console.log(res)
        window.sessionStorage.setItem('token', res.data.token)
        // 2.通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
      })
    },
    // 重置
    resetForm () {
      // console.log(this)
      this.$refs.loginFormRef.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>

.load-container{
   background: #2b4b6b;
   height: 100%;
   .login-box{
      width: 450px;
      height: 300px;
      background: #fff;
      border-radius: 5px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      .avatar-box{
         width: 130px;
         height: 130px;
         border-radius:50%;
         padding: 10px;
         border: 1px solid #eee;
         box-shadow:0px 0px 10px #ddd; // h-shadow(水平阴影的位置) v-shadow(垂直阴影的位置) blur(模糊距离) spread(阴影的尺寸) color inset(将外部阴影 (outset) 改为内部阴影);
         position: absolute;
         left: 50%; // 与transform结合进行水平居中设置
         transform: translate(-50%,-50%); // translate：盒子本身的大小
         background: #fff;
         img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #eee;
         }
      }
   }
}
.login-form{
   position:absolute;
   bottom: 0;
   width: 100%;
   padding: 0 20px;
   box-sizing: border-box; // padding和border被包含在定义的width和height之内,即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
   .btns{
      display: flex; // 将对象作为弹性伸缩盒显示
      justify-content:flex-end; // 定义项目在主轴上的对齐方式:右对齐
   }
}

</style>
